<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/v2/console/common/taglibs.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
	<title>添加公司信息</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
    </style>
	<link rel="stylesheet" href="${path}/v2/console/css/base.css">
	<link rel="stylesheet" href="${path}/v2/console/css/style.css">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=1.4.14&key=	4351c006b95de19444e1ef36ccf595cc&plugin=AMap.PolyEditor"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	<script src="${path}/v2/console/js/jquery-1.9.1.min.js"></script>
	<script src="${path}/v2/console/My97DatePicker/WdatePicker.js"></script>
	<script src="${path}/v2/console/js/jquery.form.js"></script>
	<script type="text/javascript"	src="${path}/kindeditor/kindeditor-min.js"></script>
	
</head>
<body>
	<div id="wrapper" >
		<div class="main">
			<div class="main-right">
				<div class="column-name">
					<h2>区域管理 > <b>添加区域信息</b></h2>
				</div>
				<div class="form">
				<form id="aform" action="/area/areaList.html" method="post" enctype="multipart/form-data"></form>
						<input type="hidden" id="target" name="target" value="-1">
						<div class="form-item">
							<div class="form-name">区域名称：</div>
							<div class="form-input">
								<input AutoComplete="off" type="text" class="input" id="areaName" name="areaName" value="" >
								<div class="clearfix"></div>
								<div class="form-msg hide" style="color: red;"></div>
							</div>
						</div>
						
						<div class="form-item">
							<div class="form-name">区域信息：</div>
							<div class="form-input">
								<input AutoComplete="off" type="text" class="input" id="areaInfo" name="areaInfo" value="" >
								<div class="clearfix"></div>
								<div class="form-msg hide" style="color: red;"></div>
							</div>
						</div>
						
						<div class="form-item" style="margin-top": 20px>							<div class="form-name">区域地图设置：</div>
							<div class="form-input form-map">
								<div id="container" style="width: 90%;height: 400px;"></div>
								<div class="input-card">
								   <button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button> 
								   <button class="btn" onclick="polyEditor.close()">结束编辑</button> 
								</div>
								<style>
									.form-map .input-card {
										height: 100px;
										justify-content: center;
										bottom: 1px;
										right: calc(10% + 1px) !important;
										width: 120px; 
										position: absolute;
									}
									.form-map .input-card .btn {
										margin: 0
									}
								</style>
							</div>
						</div>
						
					<button onclick="addInfo()" class="btn w144">保  存</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
	var map = new AMap.Map("container", {
	    center: [115.857342,28.621288],
	    zoom: 14
	});
	
	var path = [
	    [116.403322, 39.920255],
	    [116.410703, 39.897555],
	    [116.402292, 39.892353],
	    [116.389846, 39.891365]
	]
	
	var polygon = new AMap.Polygon({
	    path: path,
	    strokeColor: "#FF33FF", 
	    strokeWeight: 6,
	    strokeOpacity: 0.2,
	    fillOpacity: 0.4,
	    fillColor: '#1791fc',
	    zIndex: 50,
	})
	
	map.add(polygon)
	// 缩放地图到合适的视野级别
	map.setFitView([ polygon ])
	
	var polyEditor = new AMap.PolyEditor(map, polygon)
	
	polyEditor.on('addnode', function(event) {
	    //log.info('触发事件：addnode')
	})
	
	polyEditor.on('adjust', function(event) {
	    //log.info('触发事件：adjust')
	})
	
	polyEditor.on('removenode', function(event) {
	    //log.info('触发事件：removenode')
	})
	
	polyEditor.on('end', function(event) {
	    //log.info('触发事件： end')
	    $("#target").val(event.target)
	    //log.info( event.target)
	    // event.target 即为编辑后的多边形对象
	})
	function addInfo(){
		var areaName = $("#areaName").val();
		var areaInfo = $("#areaInfo").val();
		var target = $("#target").val();
		if(target == '-1'){
			alert("请保存坐标")
		}else{
			$.ajax({
				type : "post",
				url : "${path}/area/addTradingAreaInfo.html",
				dataType : "text",
				data : {
					"areaName":areaName,
					"areaInfo":areaInfo,
					"target":target
				},
				success : function(data) {
					$("#aform").submit();
				},
				error : function(XMLHttpRequest, errorThrown){
					
		       }
			});
		}
		
	}
</script>
